import React, { Component } from 'react'
import {
  Text, StyleSheet, View, TextInput, ScrollView, TouchableOpacity, Image, FlatList,
  ActivityIndicator,
  RefreshControl
} from 'react-native'
import NavBar from '../../components/PublicHeader';
import fetchWebApi from '../../public/WebApi/fetchBase';
import getStorageValue from '../../utils/getStorageValue';
import { Constant } from '../../public/js/constant';
import Layer from "../../utils/Layer";
import { POST_USER_SOCIALCIRCLE_ALLNOTICE } from '../../public/WebApi/socialcircleApi'
import Loading from '../../components/Loading';

export default class notAllowedPerson extends Component {
  constructor(props) {
    super(props)
    this.state = {
      topTitle: "收到的赞和评论",
      page: 0,
      pageSize: 3,
      //谁给我点赞了
      newsList: [
        {
          headPortrait: require("../../assets/images/socialcircle/likeComment_headportrait.png"),
          name: "明明",
          operation: "赞",
          timeStamp: "12:23",
          coverImage: require("../../assets/images/socialcircle/likeComment_cover.png")
        },
        {
          headPortrait: require("../../assets/images/socialcircle/likeComment_headportrait.png"),
          name: "明明",
          operation: "赞",
          timeStamp: "12:23",
          coverImage: require("../../assets/images/socialcircle/likeComment_cover.png")
        },
        {
          headPortrait: require("../../assets/images/socialcircle/likeComment_headportrait.png"),
          name: "明明",
          operation: "赞",
          timeStamp: "12:23",
          coverImage: require("../../assets/images/socialcircle/likeComment_cover.png")
        },
        {
          headPortrait: require("../../assets/images/socialcircle/likeComment_headportrait.png"),
          name: "明明",
          operation: "赞",
          timeStamp: "12:23",
          coverImage: require("../../assets/images/socialcircle/likeComment_cover.png")
        },
      ],
      businessCommentList: [],
      tempAddDatas: [],
      status: 1,
    }
  }

  handleRefresh = () => {
    this.setState({
      page: 0,
      isRefreshing: true,//tag,下拉刷新中，加载完全，就设置成flase
      businessCommentList: []
    });
    this.getNotice(0)
    this.setState({
      isRefreshing: false,
      status: 1
    })
  }

  loadData(pullUp) {
    this.setState({
      page: this.state.page + this.state.pageSize
    })
    this.getNotice(1).then(() => {
      var dataArray = []
      // var page = 0
      if (pullUp) {

        dataArray = this.state.businessCommentList,
          dataArray = [...this.state.businessCommentList, ...this.state.tempAddDatas]

      }
      this.setState({

        businessCommentList: dataArray,
        isLoading: false,
      })

      // console.log(this.state.mySocialCircleList);
      // console.log("###########tempAddDatas");
      // console.log(this.state.tempAddDatas);
      // console.log(this.state.page);
      // this.getSocialCircleList()
    })
  }

  genIndicator() {
    return <View style={{ alignItems: 'center' }}>
      <ActivityIndicator  //显示一个圆形的 loading 提示符号。
        style={styles.Indicator}
        size={"small"}
        animating={true}
        color={'gray'}
      />
      <Text>正在加载更多</Text>
    </View>
  }

  async getNotice(item) {
    const res = await fetchWebApi(POST_USER_SOCIALCIRCLE_ALLNOTICE, { token: await getStorageValue(Constant.TOKEN), page: this.state.page, pageSize: this.state.pageSize }, 'POST');
    console.log('getNotice@@@@@@@@@@@@@@@@@@@@@@@@@@');
    console.log(res);

    if (res.status == 200) {
      if (res.data == null) {
        this.setState({
          status: 0
        })

        Loading.hide()
        return;

      }
      if (item == 0) {
        this.setState({
          businessCommentList: res.data.businessList
        })
      } else {
        this.setState({
          tempAddDatas: res.data.businessList
        })
        if (res.data == null || res.data.businessList.length) {
          this.setState({
            status: 0
          })
        }
      }

      Loading.hide()
    } else {
      // Layer.showMsg("获取消息失败");
    }
    // console.log(this.state.businessCommentList);

    console.log('@@@@@@@@@@@@@!!!@' + this.state.status);
    Loading.hide()
  }

  _renderItem1(data) {
    console.log(data.item);
    return (
      <View style={styles.content}>

        <TouchableOpacity style={styles.ItemBox} onPress={() => {
          this.props.navigation.push('socialcircleDetails', { businessId: data.item.businessId })
        }}>
          <TouchableOpacity style={{ width: '20%' }} onPress={() => {
            this.props.navigation.push('introduces', {
              id: data.item.userInfoId,
              refresh: () => {
                // this.getSocialCircleList()
                this.getNotice()
              },
            })
          }}>
            <Image source={{ uri: data.item.userInfoAvatar }} style={styles.headPortrait} />

          </TouchableOpacity>
          <View style={styles.colDisplay}>
            <Text style={styles.name}>{data.item.userInfoName}</Text>
            <Text style={styles.fontStyle}>{data.item.allName == 0 ? '评论' : '赞'}了你的社圈</Text>
            {data.item.content == null ? null : <Text style={{ marginTop: 3, marginBottom: 3 }}>{data.item.content}</Text>}
            <Text style={styles.fontStyle}>{data.item.createTime}</Text>
          </View>
          {data.item.businessImg == null ?
            <View style={{ width: '20%', height: 50, padding: 5, textAlign: 'center', backgroundColor: '#E6E6E6', overflow: 'hidden' }}>
              <Text>{data.item.title}</Text>
            </View>
            :
            <View style={{ width: '20%', height: 50, }}>
              <Image source={{ uri: data.item.businessImg }} style={styles.headPortraitCover} />
            </View>}
        </TouchableOpacity>
      </View>
    )
  }

  componentDidMount = () => {
    Loading.show()
    this.handleRefresh()
  }
  render() {
    const noMoreComment =
      <>

        {/* 底部提示 */}
        <View style={styles.bottom_container}>
          <Text style={styles.bottom_text}>没有更多了哦~</Text>
        </View>
      </>
    return (
      <View style={{ flex: 1 }}>

        {/* 头部组件 */}
        <NavBar
          navigation={this.props.navigation}
          title={this.state.topTitle}
          titleColor={"#333"}
          pressLeft={this.props.navigation.state.params.refresh()}
        />
        <Loading />
        {/* <ScrollView> */}
        <View style={{ paddingLeft: 20, paddingRight: 20, flex: 1, height: '100%' }}>
          <FlatList
            showsVerticalScrollIndicator={false}
            ref={(flatList) => this._flatList = flatList}
            data={this.state.businessCommentList}
            renderItem={(data) => this._renderItem1(data)}
            keyExtractor={(item, index) => String(index)}
            numColumns={1}//一行一列
            ListFooterComponent={() => this.state.businessCommentList && this.state.businessCommentList.length != 0 ? (this.state.status == 1 ? this.genIndicator() : noMoreComment) : null}//底部组件
            onEndReached={//列表被滚动到距离内容最底部不足onEndReachedThreshold设置的的距离时调用。
              () => {
                this.loadData(true)
              }
            }
            refreshControl={
              <RefreshControl
                refreshing={this.state.isRefreshing}
                onRefresh={this.handleRefresh.bind(this)}//因为涉及到this.state
                colors={['#ff0000', '#00ff00', '#0000ff', '#3ad564']}
                progressBackgroundColor="#ffffff"
              />
            }
            onEndReachedThreshold={0.01}//0.5 表示距离内容最底部的距离为当前列表可见长度的一半时触发onEndReached回调
            ListEmptyComponent={() => {
              return (
                <View style={{ height: 100, alignItems: 'center', justifyContent: 'center' }}>
                  <Text style={{ fontSize: 16, color: "rgba(196, 196, 196, 1)" }}>暂时没有收到新消息哦~</Text>
                </View>
              );
            }}
          />
        </View>
        {/* <View style={styles.marlr}>
            {this.state.newsList.map((item, index) => (

              <TouchableOpacitystyle={styles.ItemBox}>
                <View style={styles.rowDisplay}>
                  <Image source={{uri:data.item.userInfoAvatar}} style={styles.headPortrait} />
                  <View style={[styles.colDisplay, { marginLeft: 15 }]}>
                    <View >
                      <Text style={styles.name}>{data.item.userInfoName}</Text>
                    </View>

                    <View style={styles.rowDisplay}>
                      <Text style={styles.fontStyle}>{data.item.allName == 0 ? '评论' : '点赞'}了你的社圈</Text>
                      <Text style={styles.fontStyle}>{data.item.createTime}</Text>
                    </View>
                  </View>
                </View>

                <View>
                  <Image source={{ uri: data.item.businessImg }} style={styles.headPortrait} />
                </View>
              </TouchableOpacity>
            ))}
          </View> */}
        {/* </ScrollView> */}


      </View>
    )
  }
}

const styles = StyleSheet.create({
  content: {
    // backgroundColor: "white",
    display: 'flex',
    flexDirection: 'column',
    width: "100%",
    // flex: 1,
    // height: 100,
    // display: "flex",
    // flexDirection: "row",
    paddingBottom: 10,
    paddingTop: 20,
    // justifyContent: "space-between",
    borderBottomWidth: 1,
    borderBottomColor: "rgba(0, 0, 0, 0.08)"
  },
  ItemBox: {
    flexDirection: 'row',
    width: "100%",
    // justifyContent: "space-between",
    // alignItems: "center",
  },
  ItemBox_left: {
    flexDirection: 'row',
    justifyContent: "center",
    alignItems: "center"
  },
  headPortrait: {
    width: 50,
    height: 50,
    borderRadius: 25
    // resizeMode: "contain"
  },
  headPortraitCover: {
    width: '100%',
    height: 50,
    borderRadius: 5
    // resizeMode: "contain"
  },
  name: {
    fontSize: 17,
    marginBottom: 5
  },
  row: {
    width: 15,
    height: 15,
    borderWidth: 1,
    borderRadius: 40
  },
  rowDisplay: {
    flexDirection: 'row'
  },
  colDisplay: {
    flexDirection: "column",
    justifyContent: "center",
    width: '60%'
    // alignItems: "center"
  },
  fontStyle: {
    color: "rgba(0, 0, 0, 0.41)",
    marginRight: 15
  },
  position_search: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    margin: 15,
    height: 40,
    textAlign: "center",
    backgroundColor: "#f0f0f0"
  },
  comment_sent: {
    display: "flex",
    justifyContent: "center",
    flexDirection: "row",
    alignItems: 'center',
    height: 60,
    width: "100%",
    position: "absolute",
    backgroundColor: "white",
    bottom: 0,
    // backgroundColor: "red"
    // borderTopWidth:1,
    // borderTopColor:"black"
  },
  complete_box: {
    display: "flex",
    justifyContent: "center",
    flexDirection: "row",
    alignItems: 'center',
    height: 60,
    width: "100%",
    position: "absolute",
    backgroundColor: "white",
    bottom: 0,
    // backgroundColor: "red"
    // borderTopWidth:1,
    // borderTopColor:"black"
  },
  complete_container: {
    height: 40,
    width: "90%",
    backgroundColor: "rgba(24, 144, 255, 1)",
    borderRadius: 20,
    display: "flex",
    flexDirection: 'row',
    alignItems: "center",
    justifyContent: "center"
  },
  complete_text: {
    color: "white",
    fontSize: 17
  },
  bottom_container: {
    height: 100,
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  bottom_text: {
    color: "rgba(196, 196, 196, 1)"
  },
})
